import { useSelector, useDispatch, Link } from 'umi';
import { useEffect, useState } from 'react';
import styles from '../pages/archives.less';
const Archives: React.FC = () => {
  let { list } = useSelector((state: { archives: any }) => state.archives);
  console.log(list);
  let [num, setnum] = useState(33);
  let dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'archives/getarchivesList',
    });
  }, []);
  return (
    <div>
      <div className={styles.box}>
        <div className={styles.header}>
          <h2 className={styles.h2}>归档</h2>
          <h5>
            共<span className={styles.p}>{num}</span>篇
          </h5>
        </div>
        <div className={styles.main}>
          {Object.keys(list).map((val, idx) => {
            return (
              <div className={styles.mainbox} key={val}>
                <h2 className={styles.h2}>{val}</h2>
                {Object.keys(list[val]).map((v, i) => {
                  return (
                    <div className={styles.h3} key={v}>
                      <h3>{v}</h3>
                      <ul className={styles.ul}>
                        {list[val][v].map((item: any, index: number) => {
                          return (
                            <Link to={`/Article/Detail?id=${item.id}`}>
                              <li className={styles.li} key={item.id}>
                                <span className="time">
                                  {' '}
                                  {item.createAt.slice(5, 10)}
                                </span>
                                <span className="context">{item.title}</span>
                              </li>
                            </Link>
                          );
                        })}
                      </ul>
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Archives;
